<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/video-js.css">
  <link rel="stylesheet" href="css/font.css">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/flexible.js"></script>
</head>
<body>
  <div id="app">
    <!-- edu-header -->
    <div class="edu-header">
      <div class="edu-header-info">
        <div class="weather">
          <div class="weather-text">晴转多云 20/11</div>
          <div class="weather-ico"></div>
        </div>
        <div class="date">10月20日 周五 农历九月初一</div>
      </div>
    </div>
    <!-- /edu-header -->
    <!-- edu-main -->
    <div class="edu-main header-through nav-through">
      <!-- 新闻详情 -->
      <div class="edu-news-detail active">
        <div class="edu-carousel"  style="height: 10.5556rem;">
          <div class="swiper-container" id='articleDetail'>
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <!-- edu-article -->
                <div class="edu-article">
                  <h1>在英语中各种“累”的说法</h1>
                  <div class="edu-article-intro">作者：  来源：中国日报  时间：2016-10-18</div>
                  <div class="edu-article-content">
                    <p>最近，上海彩虹合唱团有首神曲问世，名字就叫《感觉身体被掏空》，看看人家的英文译名“so far, the sofa is so far”，着实有种累趴后爬向沙发的即视感~ 不过，歪果仁真累到如此地步时，除了咱们熟悉的tired和exhausted，英文还能怎么喊累呢？</p>
                    <p>感觉身体被掏空时，歪果仁这样喊累~</p>
                    <p>1. Dog-tired</p>
                    <p>中文你会说“累成狗”，呵呵，歪果仁其实也这样说，表示精疲力尽，累得不行。</p>
                    <p>例：He usually got home at around seven o'clock, dog-tired after a long day in the office.</p>
                    <p>上了一天的班快要累成狗了，他一般7点钟左右才到家。</p>
                    <p>2. Worn out</p>
                  </div>
                </div>
                <!-- /edu-article -->
              </div>
              <div class="swiper-slide">
                <!-- edu-article -->
                <div class="edu-article">
                  <div class="edu-article-content">
                    <p>最近，上海彩虹合唱团有首神曲问世，名字就叫《感觉身体被掏空》，看看人家的英文译名“so far, the sofa is so far”，着实有种累趴后爬向沙发的即视感~ 不过，歪果仁真累到如此地步时，除了咱们熟悉的tired和exhausted，英文还能怎么喊累呢？</p>
                    <p>感觉身体被掏空时，歪果仁这样喊累~</p>
                    <p>1. Dog-tired</p>
                    <p>中文你会说“累成狗”，呵呵，歪果仁其实也这样说，表示精疲力尽，累得不行。</p>
                    <p>例：He usually got home at around seven o'clock, dog-tired after a long day in the office.</p>
                    <p>上了一天的班快要累成狗了，他一般7点钟左右才到家。</p>
                    <p>2. Worn out</p>
                  </div>
                </div>
                <!-- /edu-article -->
              </div>
            </div>
          </div>
        </div>
        <div class="edu-vessel">
          <div class="edu-vessel-inner">
            <div class="edu-title">相关新闻<i>相关新闻</i></div>
            <div class="edu-media-wrap">
              <div class="edu-media" data-news-id='1'>
                <div class="edu-media-left"><img src="./img/media-temp.png"></div>
                <div class="edu-media-body">
                  <h4>我们学生时代的教师节</h4>
                  <p>家长杜春燕（儿子曹子一，城北中心六街小学五年级）</p>
                </div>
              </div>
              <div class="edu-media" data-news-id='2'>
                <div class="edu-media-left"><img src="./img/media-temp.png"></div>
                <div class="edu-media-body">
                  <h4>我们学生时代的教师节</h4>
                  <p>家长杜春燕（儿子曹子一，城北中心六街小学五年级）</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /edu-main -->
    <!-- edu-nav -->
    <div class="edu-nav">
      <a href="index.html" class="edu-nav-link active">首页<i>首页</i></a>
      <a href="news.html" class="edu-nav-link">新闻<i>新闻</i></a>
      <a href="video.html" class="edu-nav-link">视频<i>视频</i></a>
      <a href="record.html" class="edu-nav-link">记录<i>记录</i></a>
      <a href="#" class="edu-nav-link back">返回<i>返回</i></a>
    </div>
    <!-- /edu-nav -->
    <div class="active articleDetail-prev swiper-button-prev edu-prev" style="top: 10.463rem;"></div>
    <div class="active articleDetail-next swiper-button-next edu-next" style="top: 10.463rem;"></div>
  </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/video.min.js"></script>
<script>
  // 单页
  // new Swiper('#articleDetail', {
  //   scrollbar: {
  //     el: '#articleDetail .swiper-scrollbar'
  //   },
  //   direction: 'vertical',
  //   slidesPerView: 'auto',
  //   mousewheelControl: true,
  //   freeMode: true,
  //   roundLengths : true, //防止文字模糊
  // })
  
  new Swiper('#articleDetail', {
    allowTouchMove: false,
    navigation: {
      nextEl: '.articleDetail-next',
      prevEl: '.articleDetail-prev'
    },
    scrollbar: {
      el: '#articleDetail .swiper-scrollbar'
    }
  })
  
  // 按钮动画
  $(document).on('click', '.edu-next,.edu-prev,.edu-nav-link', function(e) {

    var $el = $(e.target)

    if (!$el.is('.edu-next,.edu-prev,.edu-nav-link')) {
      $el = $el.parents('.edu-next,.edu-prev,.edu-nav-link')
    }

    $el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
      $el.removeClass('rubberBand')
    }).addClass('animated rubberBand')
  })
</script>
</html>